<template>
    <div class="ai-chat-page">
        <div class="left-container">
            <div class="header">
                <div class="logo-placeholder">
                    <img src="@/assets/icons/robot-avatar-pc.png" alt="嗨喵AI" />
                </div>
                <div class="title">嗨喵AI智能助手</div>
            </div>
            <div class="function-area">
                <div class="function-button" @click="handleNewConversation">
                    <img :src="newIcon" alt="新对话" class="function-icon default-icon" />
                    <img :src="newIconActive" alt="新对话" class="function-icon hover-icon" />
                    <span class="function-text">新对话</span>
                </div>
            </div>
            <div class="divider"></div>
            <div class="history-section">
                <div class="history-title">历史对话</div>
                <div class="history-list">
                    <div
                        v-for="conversation in conversationList"
                        :key="conversation.id"
                        class="history-item"
                        @click="handleHistoryItemClick(conversation)"
                        @mouseenter="handleItemMouseEnter($event, conversation.name || '')"
                        @mouseleave="handleItemMouseLeave"
                    >
                        <img
                            :src="conversation.id === currentConversationId ? newIconActive : newIconInactive"
                            alt="对话"
                            class="history-icon"
                            :class="{ 'history-icon-inactive': conversation.id !== currentConversationId }"
                        />
                        <span
                            class="history-name"
                            :class="{ 'history-name-active': conversation.id === currentConversationId }"
                        >
                            {{ conversation.name }}
                        </span>
                    </div>
                    <div
                        v-if="showTooltip && tooltipText"
                        class="tooltip-popup"
                        :style="{ left: tooltipPosition.x + 'px', top: tooltipPosition.y + 'px' }"
                    >
                        {{ tooltipText }}
                    </div>
                </div>
            </div>
        </div>
        <div class="main-container">
            <!-- 问候语区域：仅在没有会话时显示 -->
            <div v-if="currentConversationIndex === -1&&!generating" class="greeting-container">
                <div class="greeting-text">{{ greetingText }}</div>
            </div>

            <!-- 对话内容区域 -->
            <div v-else ref="contentRef" class="content">
                <!-- 对话历史数据 -->
                <template v-if="currentConversation && currentConversation.history.length > 0">
                    <template v-for="message in currentConversation.history.slice().reverse()" :key="message.id">
                        <!-- 用户消息 -->
                        <div class="message-container user-message">
                            <div class="message-bubble user-bubble">
                                {{ message.query }}
                            </div>
                        </div>

                        <!-- AI消息 -->
                        <div class="message-container ai-message">
                            <div class="ai-header">
                                <div class="ai-avatar">
                                    <img src="@/assets/icons/robot-avatar.png" alt="AI头像" />
                                </div>
                                <div class="ai-name">嗨喵AI智能助手</div>
                            </div>
                            <div class="message-bubble ai-bubble">
                                <MdPreview :model-value="message.answer" theme="light" preview-theme="default" />
                            </div>
                        </div>
                    </template>
                </template>

                <!-- 固定的正在生成容器 -->
                <template v-if="generating">
                    <div class="generating-container">
                        <div class="generating-dots">
                            <span class="dot dot-1"></span>
                            <span class="dot dot-2"></span>
                            <span class="dot dot-3"></span>
                        </div>
                        <span class="generating-text">正在生成</span>
                    </div>
                </template>

                <!-- 你可能感兴趣的问题：仅在有对话时显示 -->
                <div
                    v-if="currentConversationIndex !== -1 && !generating"
                    class="interest-container"
                >
                    <div class="interest-header">
                        <div class="interest-title">你可能感兴趣</div>
                    </div>
                    <div class="interest-questions">
                        <div
                            v-for="(question, index) in displayedInterestQuestions"
                            :key="index"
                            class="question-item"
                            @click="handleInterestQuestionClick(question)"
                        >
                            {{ question }}
                        </div>
                    </div>
                </div>
            </div>

            <!-- 消息输入区域 -->
            <div class="input-container">
                <div class="input-field">
                    <textarea
                        v-model="inputMessage"
                        placeholder="发消息..."
                        class="message-input"
                        @keydown.enter.exact.prevent="handleSendMessage"
                    ></textarea>
                </div>
                <div class="input-actions">
                    <div class="action-button send-button" @click="handleSendClick">
                        <div class="send-icon">
                            <img v-if="inputMessage.trim().length === 0" src="@/assets/icons/send-icon.png" alt="发送" />
                            <img v-else src="@/assets/icons/send-icon-active.png" alt="发送" />
                        </div>
                    </div>
                </div>
            </div>

            <!-- 猜你想问区域：仅在没有会话时显示 -->
            <div
                v-if="currentConversationIndex === -1 && !generating"
                class="guide-container"
            >
                <div class="guide-header">
                    <div class="guide-icon">
                        <img src="@/assets/icons/help.png" alt="帮助" />
                    </div>
                    <div class="guide-title">猜你想问</div>
                </div>
                <div class="guide-questions">
                    <div
                        v-for="(question, index) in displayedGuideQuestions"
                        :key="index"
                        class="question-item"
                        @click="handleQuestionClick(question)"
                        @mouseenter="handleQuestionMouseEnter($event, question)"
                        @mouseleave="handleQuestionMouseLeave"
                    >
                        {{ question }}
                    </div>
                    <div
                        v-if="showQuestionTooltip && questionTooltipText"
                        class="question-tooltip-popup"
                        :style="{ left: questionTooltipPosition.x + 'px', top: questionTooltipPosition.y + 'px' }"
                    >
                        {{ questionTooltipText }}
                    </div>
                </div>
                <div class="guide-footer">
                    <div class="refresh-btn" @click="handleRefreshQuestions">
                        <div class="refresh-icon" :class="{ rotating: isRefreshing }">
                            <img src="@/assets/icons/refresh.png" alt="刷新" />
                        </div>
                        <span>换一批</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, nextTick, watch } from 'vue'
import { MdPreview } from 'md-editor-v3'
import { useDialogConversationStore } from '@/stores/dialogConversationStore'
import { useUserStore } from '@/stores/userStore'
import { storeToRefs } from 'pinia'
import { showSimpleMessage, hideSimpleMessage } from '@/components/pc/SimpleMessageService'
import newIcon from '@/assets/icons/new-icon.png'
import newIconActive from '@/assets/icons/new-icon-active.png'
import newIconInactive from '@/assets/icons/new-icon-inactive.png'

const dialogConversationStore = useDialogConversationStore()
const userStore = useUserStore()
const { currentConversation, currentConversationId, currentConversationIndex, conversationList, guideQuestions, interestQuestions, generating } = storeToRefs(dialogConversationStore)
const { userId } = storeToRefs(userStore)

const contentRef = ref<HTMLElement | null>(null)

// 自动滚动到底部的函数
const scrollToBottom = () => {
  nextTick(() => {
    if (contentRef.value) {
      contentRef.value.scrollTop = contentRef.value.scrollHeight
    }
  })
}

// 监听对话变化，自动滚动到底部
watch(
  () => currentConversation.value?.history,
  () => {
    scrollToBottom()
  },
  { deep: true }
)

// 监听生成状态变化，在生成过程中也保持滚动到底部
watch(generating, (isGenerating) => {
  if (isGenerating) {
    scrollToBottom()
  }
})

// 根据时间计算问候语
const greetingText = computed(() => {
  const hour = new Date().getHours()
  if (hour >= 0 && hour < 12) {
    return '上午好'
  } else if (hour >= 12 && hour < 18) {
    return '中午好'
  } else {
    return '晚上好'
  }
})

const showTooltip = ref(false)
const tooltipText = ref('')
const tooltipPosition = ref({ x: 0, y: 0 })
const displayedGuideQuestions = ref<string[]>([])
const displayedInterestQuestions = ref<string[]>([])
const isRefreshing = ref(false)
const inputMessage = ref('')
const showQuestionTooltip = ref(false)
const questionTooltipText = ref('')
const questionTooltipPosition = ref({ x: 0, y: 0 })
// 取消“你可能感兴趣”区域的 hover 气泡

const handleNewConversation = () => {
  console.log('点击了新对话按钮')
  // 重置为没有对话的状态
  currentConversationId.value = ''
  currentConversationIndex.value = -1
  showSimpleMessage('开始新对话')
}

// 点击历史记录项
const handleHistoryItemClick = async (conversation: { id: string; name?: string }) => {
  try {
    console.log('点击了历史记录:', conversation.name)
    
    // 设置当前对话ID和索引
    dialogConversationStore.currentConversationId = conversation.id
    const conversationIndex = dialogConversationStore.conversationList.findIndex(
      conv => conv.id === conversation.id
    )
    dialogConversationStore.currentConversationIndex = conversationIndex
    
    // 调用getConversation获取历史消息
    await dialogConversationStore.getConversation(conversation.id, userId.value)
  } catch (error) {
    console.error('加载对话历史失败:', error)
    showSimpleMessage('加载对话历史失败')
  }
}

// 从全量引导问题中随机抽取n条（PC端6条）
const pickRandomQuestions = (source: string[], count = 6): string[] => {
  if (!Array.isArray(source) || source.length === 0) return []
  const n = Math.min(count, source.length)
  const indices = new Set<number>()
  while (indices.size < n) {
    indices.add(Math.floor(Math.random() * source.length))
  }
  const picked = Array.from(indices).map(i => source[i]).filter((q): q is string => typeof q === 'string')
  return picked
}

const refreshInterestQuestions = () => {
  displayedInterestQuestions.value = pickRandomQuestions(interestQuestions.value, 6)
}

// 监听当前对话ID变化，当对话ID不为空且发生变化时，随机抽取6个问题
watch(currentConversationId, (newId, oldId) => {
  if (newId && newId !== oldId) {
    refreshInterestQuestions()
  }
})

// 初始化时从本地恢复对话列表
onMounted(() => {
  dialogConversationStore.getConversationLocal()
  console.log('本地历史对话:', dialogConversationStore.conversationList)
  // 初始化引导问题
  displayedGuideQuestions.value = pickRandomQuestions(guideQuestions.value, 6)
  // 初始化感兴趣的问题
  refreshInterestQuestions()
})

// 发送消息的核心逻辑
const sendMessage = async () => {
  const message = inputMessage.value.trim()
  if (!message) {
    console.log('输入框为空，无法发送')
    return
  }

  // 清空输入框
  inputMessage.value = ''

  // 发送消息后立即滚动到底部
  scrollToBottom()

  // 显示"正在生成"提示（duration 设为 0 表示不自动隐藏）
  showSimpleMessage('正在生成...', 0)

  try {
    // 如果当前 index 为 -1，说明没有对话，需要创建新对话
    if (currentConversationIndex.value === -1) {
      console.log('创建新对话并发送消息:', message)
      await dialogConversationStore.newDialogConversationStream(
        userId.value,
        message,
        () => {
          // 处理流式响应数据
          // 每次收到流式数据时都滚动到底部
          scrollToBottom()
        },
        (error) => {
          // 处理错误
          console.error('发送消息失败:', error)
          // 关闭"正在生成"提示
          hideSimpleMessage()
        },
        () => {
          // 流式响应结束
          console.log('消息发送完成')
          // 响应结束后再次滚动到底部确保完整显示
          scrollToBottom()
          // 关闭"正在生成"提示
          hideSimpleMessage()
          refreshInterestQuestions()
        }
      )
    } else {
      // 已有对话，在现有对话中发送消息
      console.log('在现有对话中发送消息:', message, '对话ID:', currentConversationId.value)
      await dialogConversationStore.sendDialogConversationStream(
        userId.value,
        currentConversationId.value,
        message,
        () => {
          // 处理流式响应数据
          // 每次收到流式数据时都滚动到底部
          scrollToBottom()
        },
        (error) => {
          // 处理错误
          console.error('发送消息失败:', error)
          // 关闭"正在生成"提示
          hideSimpleMessage()
        },
        () => {
          // 流式响应结束
          console.log('消息发送完成')
          // 响应结束后再次滚动到底部确保完整显示
          scrollToBottom()
          // 关闭"正在生成"提示
          hideSimpleMessage()
          refreshInterestQuestions()
        }
      )
    }
  } catch (error) {
    console.error('发送消息异常:', error)
    // 发生异常时也要关闭"正在生成"提示
    hideSimpleMessage()
  }
}

// 引导问题相关逻辑
const handleQuestionClick = async (question: string) => {
  console.log('点击了问题:', question)
  
  // 重置当前对话状态为初始状态
  currentConversationId.value = ''
  currentConversationIndex.value = -1

  // 隐藏引导问题的悬浮提示
  showQuestionTooltip.value = false
  questionTooltipText.value = ''
  
  // 设置输入框内容为问题
  inputMessage.value = question
  
  // 自动发送消息
  await sendMessage()
}

const handleRefreshQuestions = () => {
  // 开始旋转动画
  isRefreshing.value = true
  
  // 刷新问题（PC端6条）
  displayedGuideQuestions.value = pickRandomQuestions(guideQuestions.value, 6)
  
  // 动画结束后停止旋转
  setTimeout(() => {
    isRefreshing.value = false
  }, 600) // 与CSS动画时长保持一致
}

// 鼠标进入历史记录项
const handleItemMouseEnter = (event: MouseEvent, name: string) => {
  const target = event.currentTarget as HTMLElement
  const rect = target.getBoundingClientRect()
  tooltipText.value = name
  tooltipPosition.value = {
    x: rect.left + rect.width / 2,
    y: rect.top - 10
  }
  showTooltip.value = true
}

// 鼠标离开历史记录项
const handleItemMouseLeave = () => {
  showTooltip.value = false
}

// 鼠标进入问题项
const handleQuestionMouseEnter = (event: MouseEvent, question: string) => {
  const target = event.currentTarget as HTMLElement
  const rect = target.getBoundingClientRect()
  questionTooltipText.value = question
  questionTooltipPosition.value = {
    x: rect.left + rect.width / 2,
    y: rect.top - 10
  }
  showQuestionTooltip.value = true
}

// 鼠标离开问题项
const handleQuestionMouseLeave = () => {
  showQuestionTooltip.value = false
}

// interest 问题相关逻辑
const handleInterestQuestionClick = async (question: string) => {
  console.log('点击了interest问题:', question)
  
  // 检查是否有当前对话
  if (currentConversationIndex.value === -1) {
    console.log('没有当前对话，无法发送消息')
    showSimpleMessage('请先开始一个对话')
    return
  }
  
  // 显示"正在生成"提示
  showSimpleMessage('正在生成...', 0)
  
  // 发送消息后立即滚动到底部
  scrollToBottom()
  
  try {
    // 直接在当前对话中发送消息
    console.log('在现有对话中发送interest问题:', question, '对话ID:', currentConversationId.value)
    await dialogConversationStore.sendDialogConversationStream(
      userId.value,
      currentConversationId.value,
      question,
      () => {
        // 处理流式响应数据
        // 每次收到流式数据时都滚动到底部
        scrollToBottom()
      },
      (error) => {
        // 处理错误
        console.error('发送消息失败:', error)
        // 关闭"正在生成"提示
        hideSimpleMessage()
      },
      () => {
        // 流式响应结束
        console.log('消息发送完成')
        // 响应结束后再次滚动到底部确保完整显示
        scrollToBottom()
        // 关闭"正在生成"提示
        hideSimpleMessage()
        refreshInterestQuestions()
      }
    )
  } catch (error) {
    console.error('发送消息异常:', error)
    // 发生异常时也要关闭"正在生成"提示
    hideSimpleMessage()
  }
}

// 移除感兴趣问题项的 hover 事件与气泡

/*
// 暂时停用：格式化消息中URL为链接的函数
const formatMessageWithLinks = (text: string) => {
  if (!text) return ''
  const urlRegex = /(https?:\/\/[^\s\u3000\u00A0\uFF0C\u3001\u3002\uFF1B\uFF01\uFF1F\u300A\u300B\u300C\u300D\uFF08\uFF09\u300E\u300F\u3010\u3011\u201C\u201D\u2018\u2019\u201E\u201F\u2026\u2025\uFEFF]+|www\.[^\s\u3000\u00A0\uFF0C\u3001\u3002\uFF1B\uFF01\uFF1F\u300A\u300B\u300C\u300D\uFF08\uFF09\u300E\u300F\u3010\u3011\u201C\u201D\u2018\u2019\u201E\u201F\u2026\u2025\uFEFF]*\.[a-zA-Z]{2,}(?:\.[a-zA-Z]{2,})?)/g
  return text.replace(urlRegex, (url) => {
    const escapedUrl = url
      .replace(/&/g, '&amp;')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/\"/g, '&quot;')
      .replace(/'/g, '&#039;')
    let linkUrl = escapedUrl
    if (escapedUrl.startsWith('www.')) {
      linkUrl = `https://${escapedUrl}`
    }
    return `<a href="${linkUrl}" target="_blank" rel="noopener noreferrer" class="message-link">${escapedUrl}</a>`
  })
}
*/

// 输入相关事件处理
const handleSendMessage = () => {
  sendMessage()
}

const handleSendClick = () => {
  sendMessage()
}
</script>

<style lang="scss" scoped>
// PC端样式 - 基于1440px设计稿
// 所有的 px 单位会被自动转换为 vw

.ai-chat-page {
  width: 100%;
  height: 100vh;
  background: #F0F0F7;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}

.left-container {
  width: 342px;
  height: 100%;
  background: #FFFFFF;
  
  .header {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 20px;
    
    .logo-placeholder {
      width: 64px;
      height: 64px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      
      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }
    
    .title {
      font-size: 24px;
      font-weight: bold;
      color: #000000;
    }
  }
  
  .function-area {
    margin-top: 20px;
    padding: 0 40px;
    
    .function-button {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 12px 20px;
      border-radius: 9px;
      border: 1px solid transparent;
      background: transparent;
      cursor: pointer;
      transition: all 0.3s ease;
      
      .function-icon {
        width: 24px;
        height: 24px;
        flex-shrink: 0;
        
        &.hover-icon {
          display: none;
        }
      }
      
      .function-text {
        font-size: 20px;
        font-weight: 500;
        color: #000000;
        transition: color 0.3s ease;
      }
      
      &:hover {
        background: #E3F1FF;
        border-color: #508FF5;
        
        .default-icon {
          display: none;
        }
        
        .hover-icon {
          display: block;
        }
        
        .function-text {
          color: #508FF5;
        }
      }
    }
  }
  
  .divider {
      width: 254px;
      margin: 20px auto;
      border: 1px solid #D8D8D8;
  }
  
  .history-section {
    padding: 0 40px;
    
    .history-title {
      font-size: 18px;
      font-weight: bold;
      color: #000000;
      text-align: left;
      margin-bottom: 12px;
    }
    
    .history-list {
      height: 45vh;
      overflow-y: auto;
      overflow-x: hidden;
      
      // 优化滚动体验
      scroll-behavior: smooth;
      
      // 自定义滚动条样式
      &::-webkit-scrollbar {
        width: 6px;
      }
      
      &::-webkit-scrollbar-track {
        background: transparent;
      }
      
      &::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.2);
        border-radius: 3px;
      }
      
      &::-webkit-scrollbar-thumb:hover {
        background: rgba(0, 0, 0, 0.3);
      }
      
      .history-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 0;
        cursor: pointer;
        transition: all 0.2s ease;
        
        .history-icon {
          width: 24px;
          height: 24px;
          flex-shrink: 0;
          
          &.history-icon-inactive {
            width: 16px;
            height: 16px;
          }
        }
        
        .history-name {
          font-size: 16px;
          color: #000000;
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          
          &.history-name-active {
            font-weight: bold;
          }
        }
        
        &:hover {
          opacity: 0.7;
        }
      }
      
      .tooltip-popup {
        position: fixed;
        background: rgba(0, 0, 0, 0.8);
        color: #ffffff;
        padding: 8px 12px;
        border-radius: 4px;
        font-size: 14px;
        z-index: 1000;
        pointer-events: none;
        transform: translateX(-50%) translateY(-100%);
        margin-top: -8px;
        max-width: 300px;
        word-wrap: break-word;
        white-space: normal;
        line-height: 1.4;
      }
    }
  }
}

.main-container {
  width: 1000px;
  height: 100%;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  
  // 问候语区域样式
  .greeting-container {
    width: 872px;
    margin-bottom: 24px;
    text-align: center;
    
    .greeting-text {
      font-weight: 700;
      font-size: 34px;
      color: #000000;
    }
  }
  
  // 对话内容区域样式
  .content {
    width: 1000px;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px 88px;
    margin-bottom: 24px;
    
    // 优化滚动体验
    scroll-behavior: smooth;
    
    // 自定义滚动条样式
    &::-webkit-scrollbar {
      width: 6px;
    }
    
    &::-webkit-scrollbar-track {
      background: transparent;
    }
    
    &::-webkit-scrollbar-thumb {
      background: rgba(0, 0, 0, 0.2);
      border-radius: 3px;
    }
    
    &::-webkit-scrollbar-thumb:hover {
      background: rgba(0, 0, 0, 0.3);
    }
    
    // 消息容器样式
    .message-container {
      margin-bottom: 24px;
      
      &.ai-message {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        
        .ai-header {
          display: flex;
          align-items: center;
          margin-bottom: 12px;
          
          .ai-avatar {
            width: 40px;
            height: 40px;
            margin-right: 12px;
            
            img {
              width: 100%;
              height: 100%;
              object-fit: contain;
            }
          }
          
          .ai-name {
            font-size: 18px;
            color: #000;
            font-weight: bold;
          }
        }
        
        .ai-bubble {
          background: transparent;
          color: #000;
          padding: 0;
          font-size: 18px;
          max-width: 100%;
          overflow-wrap: anywhere;
          word-wrap: break-word;
          word-break: break-word;
        }
      }
      
      &.user-message {
        display: flex;
        justify-content: flex-end;
        
        .user-bubble {
          background: linear-gradient(90deg, #486FFF 0%, #56A4EE 100%);
          color: #fff;
          padding: 4px 16px;
          border-radius: 12px 0 12px 12px;
          font-size: 18px;
          max-width: 100%;
          box-shadow: 0 2px 8px rgba(17, 49, 255, 0.3);
          overflow-wrap: anywhere;
          word-wrap: break-word;
          word-break: break-word;
        }
      }
    }
    
    // 固定的正在生成容器样式
    .generating-container {
      display: flex;
      align-items: center;
      gap: 12px;
      background: linear-gradient(270deg, rgba(72, 111, 255, 0.2) 0%, rgba(86, 165, 238, 0.2) 100%);
      border: 1px solid #76BBFF;
      border-radius: 0 12px 12px 12px;
      padding: 16px 20px;
      width: fit-content;
      margin-bottom: 24px;
      
      .generating-dots {
        display: flex;
        align-items: center;
        gap: 6px;
        
        .dot {
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background: #D8D8D8;
          animation: dotPulse 1.4s infinite ease-in-out;
          
          &.dot-1 {
            animation-delay: 0s;
          }
          
          &.dot-2 {
            animation-delay: 0.2s;
          }
          
          &.dot-3 {
            animation-delay: 0.4s;
            background: #000000;
          }
        }
        
        @keyframes dotPulse {
          0%, 60%, 100% {
            opacity: 0.3;
            transform: scale(1);
          }
          30% {
            opacity: 1;
            transform: scale(1.2);
          }
        }
      }
      
      .generating-text {
        font-size: 16px;
        color: #000000;
      }
    }
    
    // 你可能感兴趣的问题容器样式
    .interest-container {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      width: fit-content;
      padding: 0;
      margin-bottom: 24px;
      
      .interest-header {
        margin-bottom: 12px;
        
        .interest-title {
          font-size: 20px;
          color: #4974FE;
          font-weight: bold;
        }
      }
      
      .interest-questions {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: fit-content;
        
        .question-item {
          width: fit-content;
          max-width: 400px;
          background: #fff;
          border: 1px solid #76BBFF;
          border-radius: 8px;
          padding: 4px 8px;
          font-size: 16px;
          font-weight: 500;
          color: #000000;
          cursor: pointer;
          transition: all 0.2s ease;
          text-align: left;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          
          &:hover {
            background: #f5f5f5;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
          }
        }
        
        
      }
    }
  }
  
  // 消息输入容器样式
  .input-container {
    width: 872px;
    height: 140px;
    background: #FFFFFF;
    border: 1px solid #E5E5E5;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    position: relative;
    
    .input-field {
      flex: 1;
      display: flex;
      align-items: flex-start;
      
      .message-input {
        width: 100%;
        height: 100%;
        border: none;
        outline: none;
        font-size: 16px;
        color: #000;
        background: transparent;
        resize: none;
        font-family: inherit;
        
        &::placeholder {
          color: #6f6f6f;
        }
      }
    }
    
    .input-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-top: auto;
      
      .action-button {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s ease;
        
        &:active {
          transform: scale(0.95);
        }
        
        &.send-button {
          .send-icon {
            width: 100%;
            height: 100%;
            
            img {
              width: 100%;
              height: 100%;
              object-fit: contain;
            }
          }
        }
      }
    }
  }
  
  // 猜你想问容器样式
  .guide-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 872px;
    background: linear-gradient(270deg, rgba(72, 111, 255, 0.2) 0%, rgba(86, 165, 238, 0.2) 100%);
    border-radius: 18px;
    border: 1px solid #76BBFF;
    padding: 16px 24px;
    margin-bottom: 32px;
    
    .guide-header {
      display: flex;
      align-items: center;
      margin-bottom: 8px;
      
      .guide-icon {
        width: 22px;
        height: 20px;
        margin-right: 12px;
        
        img {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }
      
      .guide-title {
        font-size: 20px;
        color: #4974FE;
        font-weight: bold;
      }
    }
    
    .guide-questions {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      gap: 16px;
      margin-bottom: 8px;
      width: 100%;
      
      .question-item {
        flex: 0 0 calc(50% - 8px);
        max-width: 400px;
        background: #fff;
        border-radius: 12px;
        padding: 12px 16px;
        font-size: 16px;
        font-weight: 500;
        color: #000000;
        cursor: pointer;
        transition: all 0.2s ease;
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        
        &:hover {
          background: #f5f5f5;
          transform: translateY(-2px);
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
      }
      
      .question-tooltip-popup {
        position: fixed;
        background: rgba(0, 0, 0, 0.8);
        color: #ffffff;
        padding: 8px 12px;
        border-radius: 4px;
        font-size: 14px;
        z-index: 1000;
        pointer-events: none;
        transform: translateX(-50%) translateY(-100%);
        margin-top: -8px;
        max-width: 400px;
        word-wrap: break-word;
        white-space: normal;
        line-height: 1.4;
      }
    }
    
    .guide-footer {
      display: flex;
      justify-content: flex-end;
      width: 100%;
      
      .refresh-btn {
        display: flex;
        align-items: center;
        gap: 8px;
        background: transparent;
        border: none;
        cursor: pointer;
        font-size: 16px;
        color: #4974FE;
        transition: all 0.2s ease;
        
        .refresh-icon {
          width: 20px;
          height: 20px;
          transition: transform 0.3s ease;
          
          img {
            width: 100%;
            height: 100%;
            object-fit: contain;
          }
          
          &.rotating {
            animation: rotate360 0.6s ease-in-out;
          }
        }
        
        @keyframes rotate360 {
          from {
            transform: rotate(0deg);
          }
          to {
            transform: rotate(360deg);
          }
        }
      }
    }
  }
}

// 消息链接样式（使用:deep()穿透scoped）
:deep(.message-link) {
  color: #4974FE;
  text-decoration: underline;
  cursor: pointer;
  // 允许链接本身在任意位置断行，配合容器规则
  overflow-wrap: anywhere;
  word-break: break-all;
  
  &:hover {
    color: #365ECF;
  }
  
  &:active {
    color: #2A4DAD;
  }
}

:deep(.md-editor-preview img) {
  max-height: 500px !important;
  max-width: none !important;
  width: auto !important;
}
</style>

